<template>
    <div class="orderDeal">
        <el-breadcrumb class="breadcrumb" separator="/">
            <el-breadcrumb-item :to="{ path: '/order' }">我的订单</el-breadcrumb-item>
            <el-breadcrumb-item>订单处理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="footer-content">
            <el-button class="custom-button-minor">取消</el-button>
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button type="primary toRight" @click="dialogVisibleLoan = true">互换主贷人</el-button>
            <el-button type="primary toRight" @click="creditEdit">征信修改</el-button>
            <el-button type="primary toRight" @click="supplementShow=true">补充资料</el-button>
        </div>
        <div class="info-content">
            <el-tabs class="info-tabs" v-model="activeName" @tab-click="tapChange">
                <template v-for="vm in tapList">
                    <el-tab-pane class="info-temp" :label="vm.name" :name="'tap'+vm.index">
                        <div :is="vm.temp" :ref="vm.temp" keep-alive></div>
                    </el-tab-pane>
                </template>
            </el-tabs>
        </div>
        <el-dialog class="dialog" title="互换主贷人" :visible.sync="dialogVisibleLoan" size="tiny" :before-close="dialogLoanClose">
            <div class="dialogContent">
                <p>请输入调换原因</p>
                <el-input type="textarea" placeholder="请输入" v-model="changeLoanRusult"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleLoan = false">取 消</el-button>
                <el-button type="primary"  @click="changeLoanMajorPerson">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="补录资料" :visible.sync="supplementShow">
            <p/>
            <p/>
            <hr/>
            <p/>
            <p/>
            <el-form :model="fileUploadDialog" label-width="100px">
                <div class="title">GPS信息</div>
                <el-form-item>
                    <el-row class="info-row">
                        <el-col :span="10" class="info-label">
                            GPS编号：
                            <el-input placeholder="请输入" v-model="GPSNumber"></el-input>
                        </el-col>
                        <el-col :span="12" class="info-label">
                            安装位置：
                            <el-input placeholder="请输入" v-model="GPSPlace"></el-input>
                            <!--              <el-select v-model="GPSPlace" placeholder="请选择">
               <el-option value ="车架" label="车架"></el-option>
              </el-select> -->
                        </el-col>
                    </el-row>
                </el-form-item>
                <div class="title">购车人和共同购车人附件</div>
                <el-form-item>
                    <upload class="upload" ref="a12"></upload>
                </el-form-item>
                <div class="title">担保人附件</div>
                <el-form-item>
                    <upload class="upload" ref="a3"></upload>
                </el-form-item>
                <div class="title">车辆附件</div>
                <el-form-item>
                    <upload class="upload" ref="a4"></upload>
                </el-form-item>
                <div class="title">其他信息录入附件</div>
                <el-form-item>
                    <upload class="upload" ref="a5"></upload>
                </el-form-item>
                <div class="title">视频附件</div>
                <el-form-item>
                    <upload class="upload" ref="a6"></upload>
                </el-form-item>
            </el-form>
            <p/>
            <p/>
            <hr/>
            <p/>
            <p/>
            <el-button type="primary" @click="supplementSave()">保存</el-button>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'orderDeal',
    components: {
        credit: require('../../components/order/credit'),
        customInfo: require('../../components/order/customInfo'),
        carBuyCommon: require('../../components/order/carBuyCommon'),
        assurePerson: require('../../components/order/assurePerson'),
        carAndCredit: require('../../components/order/carAndCredit'),
        attachment: require('../../components/order/attachment'),
        finance: require('../../components/order/finance'),
        synthesize: require('../../components/order/synthesize'),
        assetProtection: require('../../components/order/assetProtection'),
        checkInfo: require('../../components/order/checkInfo'),
        historyLoan: require('../../components/order/historyLoan'),
        upload: require('../../components/other/upload'),
    },
    data() {
        return {
            supplementShow: false,
            GPSPlace: '',
            GPSNumber: '',
            orderNo: this.$route.query.orderNo,
            annexBatchNo: this.$route.query.annexBatchNo,
            customerId: this.$route.query.customerId,
            activeName: 'tap0',
            tapList: [
                { name: '征信结果', index: 0, temp: 'credit' },
                { name: '客户信息', index: 1, temp: 'customInfo' },
                { name: '共同购车人', index: 2, temp: 'carBuyCommon' },
                { name: '担保人', index: 3, temp: 'assurePerson' },
                { name: '车辆及贷款信息', index: 4, temp: 'carAndCredit' },
                { name: '附件', index: 5, temp: 'attachment' },
                { name: '历史贷款记录', index: 6, temp: 'historyLoan' },
                { name: '综合处理', index: 8, temp: 'synthesize' },
                { name: '财务结算', index: 7, temp: 'finance' },
                { name: '资产保全', index: 9, temp: 'assetProtection' },
                { name: '审核信息', index: 10, temp: 'checkInfo' },
            ],
            dialogVisibleLoan: false, //互换主贷人弹出框状态
            changeLoanRusult: '', //互换主贷人原因
        }
    },
    methods: {
        tapChange() {
            console.log(this.activeName);
            this.$libs.scrollTop('.el-tabs__content');
            switch (this.activeName) {
                case 'tap0':
                    this.$refs.credit[0].getCreditInfo(this.orderNo);
                    break;
                case 'tap1':
                    this.$refs.customInfo[0].getUserInfo(this.orderNo);
                    break;
                case 'tap2':
                    this.$refs.carBuyCommon[0].getInfo(this.orderNo);
                    break;
                case 'tap3':
                    this.$refs.assurePerson[0].getInfo(this.orderNo);
                    break;
                case 'tap4':
                    this.$refs.carAndCredit[0].getCarInfo(this.orderNo);
                    this.$refs.carAndCredit[0].getLoanInfo(this.orderNo);
                    break;
                case 'tap5':
                    this.$refs.attachment[0].postDeal(this.orderNo, this.annexBatchNo);
                    break;
                case 'tap6':
                    this.$refs.historyLoan[0].getDate(this.orderNo, this.customerId);
                    break;
                case 'tap7':
                    this.$refs.finance[0].getFinanceData(this.orderNo);
                    break;
                case 'tap8':
                    this.$refs.synthesize[0].getData(this.orderNo);
                    break;
                case 'tap9':
                    this.$refs.assetProtection[0].getInfo(this.orderNo);
                    break;
                case 'tap10':
                    this.$refs.checkInfo[0].getInfo(this.orderNo);
                    break;
                default:
                    break;
            }
        },
        dialogLoanClose() {
            this.dialogVisibleLoan = false;
        },
        changeLoanMajorPerson() {
            // 互换主贷人
            this.$http.post('/modification/buyerReplacement/' + this.orderNo, {
                reason: this.changeLoanRusult
            }).then((data) => {
                if (data.data.success) {
                    this.dialogVisibleLoan = false;
                    this.$confirm('申请提交成功！', '提交成功', {
                        confirmButtonText: '返回订单处理',
                        cancelButtonText: '关闭',
                        type: 'success'
                    }).then(() => {

                    }).catch(() => {

                    });
                } else {
                    this.$message.error(data.data.message);
                }
            }).catch((error) => {

            });

        },
        creditEdit() {
            this.$refs.credit[0].isEdit = true;
            this.$refs.customInfo[0].isEdit = true;
            this.$refs.carBuyCommon[0].isEdit = true;
            this.$refs.assurePerson[0].isEdit = true;
            this.$refs.carAndCredit[0].isEdit = true;
            this.$refs.finance[0].isEdit = true;
            this.$refs.synthesize[0].isEdit = true;
            this.$refs.attachment[0].isEdit = true;
            this.$refs.credit[0].isChanged = true;
        },
        supplementSave() {
            let param = {
                "gpsNum": this.GPSNumber,
                "gpsSetLocation": this.GPSPlace,
                "orderNo": this.orderNo,
            };
            this.$http.post('/submitTaskController/collectionData', param).then((response) => {
                console.log(response);
                if (response.data.success) {
                    this.$message({
                        message: '保存成功！',
                        type: 'success'
                    });
                    this.$router.push({ path: '/playMonenApply' });
                } else {
                    this.$message.error('保存失败!');
                }
            }).catch((error) => {

            });
        },
        submit() {
            console.log(this.activeName);
            switch (this.activeName) {
                case 'tap0':
                    this.$refs.credit[0].creditInfoEnter(this.orderNo);
                    break;
                case 'tap1':
                    this.$refs.customInfo[0].userInfoEnter(this.orderNo);
                    break;
                case 'tap2':
                    this.$refs.carBuyCommon[0].infoEnter(this.orderNo);
                    break;
                case 'tap3':
                    this.$refs.assurePerson[0].infoEnter(this.orderNo);
                    break;
                case 'tap4':
                    this.$refs.carAndCredit[0].submitInfo(this.orderNo);
                    break;
                case 'tap7':
                    this.$refs.finance[0].financeEnter(this.orderNo);
                    break;
                case 'tap8':
                    this.$refs.synthesize[0].powerDeal(this.orderNo, -1);
                    break;
                default:
                    break;
            }

        }
    },
    mounted() {
        // 默认获取征信信息-tap0
        this.$refs.credit[0].getCreditInfo(this.orderNo);
        this.$nextTick(() => {
            this.$refs.a12.isOne = false;
            this.$refs.a12.type = 1;
            this.$refs.a12.id = this.verify.annexBatchNo;
            this.$refs.a12.group = 1;
        });
    }
}

</script>
<style lang="scss" scoped>
@import '../../assets/css/site.scss';
.orderDeal {
    padding: 10px 16px;
    position: relative;
    .info-content {
        background: #fff;
        padding: 20px;
        position: absolute;
        top: 50px;
        left: 16px;
        right: 16px;
        bottom: 0;
        .info-temp {
            background: #fff;
            padding: 0px 20px 100px 20px;
            .credit,
            .customInfo,
            .carBuyCommon,
            .assurePerson,
            .carAndCredit,
            .creditEnter,
            .finance,
            .attachment,
            .assetProtection,
            .checkInfo,
            .checkModify {
                padding-right: 200px;
            }
            .synthesize {
                padding-right: 0px;
            }
        }
    }
    .title {
        font-size: 14px;
        color: #475669;
        padding-left: 8px;
        border-left: 3px solid #20A0FF;
    }
    .footer-content {
        background: #fff;
        position: fixed;
        bottom: 0;
        left: 200px;
        right: 0px;
        height: 36px;
        padding: 12px 100px 12px 50px;
        border-top: 1px solid #e0e6ed;
        z-index: 1;
    }
    .dialogContent {
        padding: 0px 30px 10px 30px;
    }
}

</style>
